import Vue from 'vue'
import VueRouter from 'vue-router'

import store from '@/store'

// 导入 相应的组件对象
// 对于不需要懒加载的组件，正常导入
import Login from '@/views/Login'
import Layout from '@/views/Layout'
import Home from '@/views/Layout/Home'

// 需要懒加载的，换成函数写法
const Register = () => import('@/views/Register')
// import UserInfo from '@/views/Layout/User/UserInfo'
const UserInfo = () => import('@/views/Layout/User/UserInfo')
// import UserAvatar from '@/views/Layout/User/UserAvatar'
const UserAvatar = () => import('@/views/Layout/User/UserAvatar')
// import UserPwd from '@/views/Layout/User/UserPwd'
const UserPwd = () => import('@/views/Layout/User/UserPwd')
// import ArtCate from '@/views/Layout/Article/ArtCate'
const ArtCate = () => import('@/views/Layout/Article/ArtCate')
// import ArtList from '@/views/Layout/Article/ArtList'
const ArtList = () => import('@/views/Layout/Article/ArtList')
// import _404 from '@/views/404'
const _404 = () => import('@/views/404')

Vue.use(VueRouter)

// 把下面的代码粘贴到路由模块中对应的位置，即可防止路由报错的问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}

// 把下面的代码粘贴到路由模块中对应的位置，即可防止路由报错的问题
const originalReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function replace (location) {
  return originalReplace.call(this, location).catch(err => err)
}

const routes = [
  {
    path: '/register',
    component: Register,
    // meta就是路由元信息的配置，每个路由规则都可以添加meta字段，记录当前路由信息
    meta: {
      title: '注册'
    }
  }, {
    path: '/login',
    component: Login,
    meta: {
      title: '登录'
    }
  }, {
    path: '/',
    component: Layout,
    redirect: '/home', // 重定向
    children: [// 路由嵌套
      {
        path: 'home',
        component: Home,
        meta: {
          title: '首页'
        }
      }, {
        path: 'user-info',
        component: UserInfo,
        meta: {
          title: '基本资料'
        }
      }, {
        path: 'user-avatar',
        component: UserAvatar,
        meta: {
          title: '更换头像'
        }
      }, {
        path: 'user-pwd',
        component: UserPwd,
        meta: {
          title: '重置密码'
        }
      }, {
        path: 'art-cate',
        component: ArtCate,
        meta: {
          title: '文章分类'
        }
      }, {
        path: 'art-list',
        component: ArtList,
        meta: {
          title: '文章列表'
        }
      }
    ]
  },
  {
    // 配置404
    path: '*',
    component: _404,
    meta: {
      title: 'Not Found'
    }
  }
]

const router = new VueRouter({
  routes
})
// 准备一个白名单数组，这里写的路由是 不需要token 就可访问的
const whiteList = ['/login', '/register']
// 路由的全局前置守卫，所有的路由跳转前都要经过这里
router.beforeEach((to, from, next) => {
  // 1. 获取token
  const { token } = store.state.user
  // 2. 根据有无token，决定是否放行
  document.title = to.meta.title
  if (token) { // 有token，直接放行
    next()
  } else { // 没有token
    if (whiteList.includes(to.path)) {
      next()// 直接放行
    } else {
      next('/login') // 要去首页，先去登录
    }
  }
})

export default router
